<template>  
  <div class="user-management"> <!-- 用户管理容器 -->
    <el-header>用户管理</el-header> <!-- 页面标题 -->

    <el-container class="user-table-container"> <!-- 用户表格容器 -->
      <el-main>
        <el-table  
          :data="users"  
          style="width: 100%"  
        >  
          <el-table-column  
            prop="name"  
            label="用户名"  
          ></el-table-column>  
          <el-table-column  
            prop="role"  
            label="角色/权限"  
          ></el-table-column>  
          <el-table-column  
            label="操作"  
            width="120"  
          >  
            <template slot-scope="scope">  
              <el-button type="text" @click="handleEditRole(scope.row)">修改权限</el-button>  
            </template>  
          </el-table-column>  
        </el-table>
      </el-main>
    </el-container>

    <!-- 修改权限的对话框 -->  
    <el-dialog  
      title="修改权限"  
      :visible.sync="dialogVisible"  
      width="30%"  
      @close="dialogVisible = false"  
    >  
      <el-form :model="editForm">  
        <el-form-item label="角色/权限">  
          <el-select v-model="editForm.role" placeholder="请选择权限">  
            <el-option  
              v-for="role in roles"  
              :key="role.value"  
              :label="role.label"  
              :value="role.value"  
            ></el-option>  
          </el-select>  
        </el-form-item>  
      </el-form>  
      <span slot="footer" class="dialog-footer">  
        <el-button @click="dialogVisible = false">取 消</el-button>  
        <el-button type="primary" @click="updateUserRole">确 定</el-button>  
      </span>  
    </el-dialog>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'UserManagement',  
  data() {  
    return {  
      users: [  
        { name: '用户A', role: '管理员' },  
        { name: '用户B', role: '普通用户' },  
        { name: '用户C', role: '访客' },  
      ],  
      dialogVisible: false, // 对话框的显示状态  
      editingUser: null, // 当前正在编辑的用户  
      editForm: { // 用于编辑权限的表单数据  
        role: '',  
      },  
      roles: [ // 预设的角色列表  
        { value: '管理员', label: '管理员' },  
        { value: '普通用户', label: '普通用户' },  
        { value: '访客', label: '访客' },  
      ],  
    };  
  },  
  methods: {  
    handleEditRole(user) {  
      this.editingUser = user; // 保存当前正在编辑的用户  
      this.editForm.role = user.role; // 初始化表单的权限值  
      this.dialogVisible = true; // 显示对话框  
    },  
    updateUserRole() {  
      // 假
